<template>
  <div class="header">
    <div class="content">
      <ul class="left-menu">
        <li class="os"><router-link to="/official">小米官网</router-link></li>
        <li class="mall"><router-link to="/">小米商城</router-link></li>
      </ul>
      <ul class="right-menu">
        <li><router-link to="/login">登录</router-link></li>
        <li><router-link to="/register">注册</router-link></li>
        <li>消息通知</li>
        <li class="cart">
          <el-icon><ShoppingCart /></el-icon>
          <span>购物车（0）</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ShoppingCart } from '@element-plus/icons-vue';
</script>

<style lang="scss" scoped>
.header {
  height: 40px;
  background-color: #3d3d3d;
  
  .content {
    width: 1220px;
    margin: 0 auto;
    color: #b0b0b0;
    display: flex;
    justify-content: space-between;
    
    ul {
      display: flex;
      height: 40px;
      align-items: center;
      
      li {
        cursor: pointer;
        padding: 0 8px;
        
        a {
          color: #b0b0b0;
          text-decoration: none;
          
          &:hover {
            color: white;
          }
        }
        
        &:hover {
          color: white;
        }
        
        &.cart {
          width: 120px;
          height: 40px;
          margin-left: 15px;
          line-height: 40px;
          text-align: center;
          span{
            margin-left: 3px;
          }
          &:hover {
            color: #ff6700;
            background-color: white; 
          }
        }
      }
    }
  }
}
</style> 